<template>
  <div class="background">
    <Header ref="child">111</Header>
    <div class="all">
      <el-row :gutter="20">
        <el-col :span="5">
          <Left></Left>
        </el-col>
        <el-col :span="14">
          <h1 align="center">欢迎来到YWM博客</h1>
            <Blog v-for="(blog,index) in blogs" :blog='blog' :key="index"></Blog>
            <div class="paging">
              <el-pagination
                background
                layout="prev, pager, next"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                @current-change=page>
              </el-pagination>
            </div>
          <!--<div class="block">
            <el-timeline class="timeline">
              <el-timeline-item v-for="blog in blogs" :timestamp="blog.lastUpdateDate" placement="top">
                <el-card>
                  &lt;!&ndash;<div slot="header" class="clearfix">
                  </div>&ndash;&gt;
                  <h3 align="center">{{blog.blogTitle}}</h3>
                  &lt;!&ndash;<hr>&ndash;&gt;
                  <h5>博客简介:</h5>
                  <p v-html="blog.blogRemark" style="border: 1px solid #8c939d;padding: 10px">{{ blog.blogContent }}</p>
                  <p style="right: 10px;position: absolute;bottom: -2px;"> {{blog.author}} 提交于 {{blog.lastUpdateDate}}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>-->
        </el-col>
        <el-col :span="5">
          <div class="grid-content">
            <Right :typeList='typeList'></Right>
          </div>
        </el-col>
      </el-row>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Left from './Left'
import Right from './Right'
import Header from '../common/Header'
import Footer from '../common/Footer'
import Blog from '../common/Blog'
import { mapState } from 'vuex'
// eslint-disable-next-line no-unused-vars
import background from '../../assets/css/background.css'
export default {
  name: 'Home',
  components: {
    Left,
    Right,
    Header,
    Footer,
    Blog
  },
  computed: {
    ...mapState(['token'])
  },
  data () {
    return {
      blogs: {},
      typeList: [],
      currentPage: 1,
      total: 0,
      pageSize: 5,
      test: 888,
      isLogin: false,
      username: '999999',
      userInfo: {},
      isSearch1: false,
      keyword: ''
    }
  },
  methods: {
    page (currentPage) {
      if (this.isSearch1) {
        this.searchBlog(this.keyword, currentPage)
      } else {
        this.pageQuery(currentPage)
      }
    },
    pageQuery (currentPage) {
      const _this = this
      this.$axios
        .get('/blogs/' + currentPage + '/' + this.pageSize)
        .then((res) => {
          _this.blogs = res.data.data.blog
          _this.total = res.data.data.totalSize
          _this.pageSize = res.data.data.size
          _this.currentPage = res.data.data.currentPage
        })
    },
    myBlogQuery (currentPage) {
      const _this = this
      if (this.$store.getters.getUser) {
        this.userId = this.$store.getters.getUser.userId
      }
      this.$axios
        .post('/myblogs', {
          currentPage: currentPage,
          size: this.pageSize,
          author: this.userId
        })
        .then((res) => {
          _this.blogs = res.data.data.blog
          _this.currentPage = res.data.data.currentPage
          _this.pageSize = res.data.data.size
          _this.total = res.data.data.totalSize
        })
    },
    typeQuery () {
      const _this = this
      this.$axios
        .get('/types')
        .then((res) => {
          _this.typeList = res.data.data
        })
    },
    logout () {
      const _this = this
      this.$axios.get('/logout', {
        header: {
          Authorization: localStorage.getItem('token')
        }
      }).then((res) => {
        _this.loginFlag = false
        _this.$store.commit('REMOVE_INFO')
        _this.$router.push('/login')
      })
    },
    login () {
      this.$router.push('/login')
    },
    showPersonalCenter () {
      this.$router.push('/personal')
    },
    contentShow (key, keyPath) {
      if (key === 'personalNotes') {
        this.myBlogQuery(1)
      } else if (key === 'homePage') {
        this.pageQuery(1)
      } else if (key === 'logout') {
        this.logout()
      } else if (key === 'login') {
        this.login()
      } else if (key === 'personalCenter') {
        this.showPersonalCenter()
      }
    },
    searchBlog (keyword, currentPage) {
      this.$axios.get(`/es/getBlog/${keyword} /${currentPage - 1}` + '/' + this.pageSize).then((res) => {
        this.keyword = keyword
        this.blogs = res.data
        this.isSearch1 = true
      }).catch(err => {
        console.log('----------err--------------')
        console.log(err)
        console.log('--------------------------------')
      })
    }
  },
  mounted () {
    this.username = this.$refs.child.user.username
    this.userInfo = this.$refs.child.user
    if (this.username === '请登录') {
      this.isLogin = false
    } else {
      this.isLogin = true
      if (this.$route.params.isSearch) {
        this.searchBlog(this.$route.params.keyword, 1)
      } else {
        this.pageQuery(1)
      }
      this.typeQuery()
    }
  }
}
</script>
<style>
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    margin: 0 30px;
  }
  .all {
    margin: 10px 5px;
  }

  .timeline {
    position: relative;
  }

</style>
